<template>
  <div class="order-detail">
    <s-header :name="'订单详情'"></s-header>
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ statusString[detail.status] }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ detail.orderSn }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ detail.createTime.replace('T', ' ') }}</span>
      </div>
      <van-button v-if="detail.status == 3" style="margin-bottom: 10px" color="#f2140c" round block @click="handleConfirmOrder(detail.orderSn)">确认收货</van-button>
      <van-button v-if="detail.status == 0" style="margin-bottom: 10px" color="#f2140c" round block @click="showPayFn">去支付</van-button>
      <van-button v-if="!(detail.status < 0 || detail.status == 4)" block round @click="handleCancelOrder(detail.id)">取消订单</van-button>
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{ detail.totalAmount }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>普通快递</span>
      </div>
    </div>
    <van-card
      v-for="item in detail.orderItemList" :key="item.id"
      style="background: #fff"
      :num="item.productQuantity"
      :price="item.productPrice"
      :desc="item.productSubTitle"
      :title="item.productName"
      :thumb="item.productPic"
    />
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
      <div class="group-list">
        <van-radio-group v-model="payWay">
          <van-cell-group>
            <van-cell title="微信支付" clickable @click="payWay = '1'" >
              <template #icon>
                <div class="icon"> 
                  <van-icon name="wechat-pay" color="#2eca0f" size="25"/>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="1" checked-color="#f2140c"/>
              </template>
            </van-cell>
            <van-cell title="支付宝支付" clickable @click="payWay = '2'">
              <template #icon>
                <div class="icon">
                  <van-icon name="alipay" color="#008cd6" size="25"/>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="2" checked-color="#f2140c"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div class="pay">
          <van-button type="primary" size="large" round color="linear-gradient(to right, #ff6034, #ee0a24)" @click="handlePayOrder(detail.id)">立即支付</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>

import { getOrderByOrderSn, updateOrder } from "@/api/order";
import { Toast } from 'vant'
import SHeader from '@/components/SHeader.vue';

export default {
  name: 'orderDetail',
  data() {
    return {
      orderSn: this.$route.query.orderSn ? this.$route.query.orderSn : null,
      detail: {},
      payWay: 0,
      statusString: [
        "未付款", "未发货", "已发货", "已完成", "已关闭", "无效订单"
      ],
      show: false,
      showPay: false
    }
  },
  created() {
    this.onLoad()
  },
  components: {
    SHeader
  },
  methods: {
    async onLoad(){
      if(this.orderSn != null){
        const {data: order } = await getOrderByOrderSn({orderSn: this.orderSn})
        // console.log(order);
        this.detail = order;
      } else {
        Toast.fail("获取订单失败")
      }
    },
    handleConfirmOrder(orderId) {
      if(orderId != null) {
        updateOrder({
          id: orderId,
          status: 3
        }).then(res =>{
          if(res.code === 200) {
            Toast.success("确认收货成功");
            this.$router.go(0);
          }
        })
      }
    },
    handleCancelOrder(orderId) {
      if(orderId != null) {
        updateOrder({
          id: orderId,
          status: 4
        }).then(res =>{
          if(res.code === 200) {
            Toast.success("订单取消成功");
            this.$router.go('/order-list');
          }
        })
      }
    },
    showPayFn() {
      this.show = true
    },
    handlePayOrder(orderId) {
      if(orderId != null) {
        updateOrder({
          id: orderId,
          payType: this.payWay,
          status: 1,
        }).then(res =>{
          if(res.code === 200) {
            Toast.success("支付成功");
            this.$router.go('/order-list');
          }
      })
      } else {
        Toast.fail("支付失败");
        this.show = false
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .order-detail {
    background: #f7f7f7;
    .order-status {
      background: #fff;
      padding: 20px;
      font-size: 15px;
      .status-item {
        margin-bottom: 10px;
        label {
          color: #999;
        }
        span {

        }
      }
    }
    .order-price {
      background: #fff;
      margin: 20px 0;
      padding: 20px;
      font-size: 15px;
      .price-item {
        margin-bottom: 10px;
        label {
          color: #999;
        }
        span {

        }
      }
    }
    .van-card {
      margin-top: 0;
    }
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .group-list {
      margin-top: 15px;
      .icon {
        padding-right: 5px;
      }
      .pay {
        position: absolute;
        width: 100%;
        bottom: 0;
      }
    }
  }
</style>